<template>
	<view class="view_list">
		<view class="view_fixed">
			<view class="view_heard">
				<uni-nav-bar :statusBar="true" :fixed=true left-icon="left" right-icon="plusempty"
					:title="$t('erp.productList')" @clickRight="goAdd" @clickLeft="goBack" />
			</view>
			<!-- <view class="view_search">
				<uni-search-bar v-model="params.keyword" placeholder="请输入" cancelButton="none" @confirm="search" />
			</view> -->
			<!-- <view class="view_tabs">
				<uni-segmented-control :current="params.tabIndex" :values="tabList" @clickItem="clickTab" />
			</view> -->
		</view>
		<me-scroll :top="['h5'].includes($env) ? '88rpx' : '166rpx'" @getData="getData" refs="mescroll"
			:emptyInfo="{ text: $t('erp.noProduct') }">
			<block slot="list">
				<uni-collapse class="list_content" v-if="tableData.length">
					<uni-collapse-item v-for="(item, index) in tableData" :key="index" :open="true" class="list_item">
						<template v-slot:title>
							<me-section :title="item.goods_code" type="line" />
						</template>
						<viewItem :key="index" :pageName="params.pageName" :data="item" :btn="false" />
					</uni-collapse-item>
				</uni-collapse>
				<!-- <view v-if="!isLoading && !tableData.length" class="list_empty">
					<me-empty :text="$t('common.listEmptyText')" :isIndex="!1" />
				</view> -->
				<me-loading ref="loading" />
			</block>
		</me-scroll>
	</view>
</template>

<script>
import viewItem from './components/add/listItem.vue'
import meScroll from '../../components/ui/me-scroll/index.vue';
import meLoading from '../../components/ui/me-loading/index.vue';
import meSection from '../../components/ui/me-section/index.vue';
import { getShopListByRecord } from '@/api/index'

export default {
	data () {
		return {
			params: {
				keyword: '',
				tabIndex: 0
			},
			tabList: ['全部', '草稿', '待审核', '驳回', '待审核1', '驳回2'],
			isLoading: false,
			tableData: []
		};
	},
	components: {
		viewItem,
		meScroll,
		meLoading,
		meSection
	},
	onLoad (options) {
		this.params.recordId = options.recordId || ''
		this.params.recordType = options.type || ''
		this.params.pageName = options.pageName || ''
		this.$nextTick(() => {
			uni.setNavigationBarTitle({
				title: this.$t('erp.productList')
			});
		})
	},
	onShow () { },
	methods: {
		goBack () {
			this.$tab.navigateBack({ data: 1 })
		},
		goAdd () {
			this.$tab.navigateTo(`/pages/shop/add?recordId=${this.params.recordId}&type=${this.params.recordType}&pageName=${this.params.pageName}`)
		},
		async goSearch () {
			console.log('search', this.params)
		},
		async clickTab (e) {
			console.log('search', e, this.params)
			if (this.params.tabIndex != e.currentIndex) {
				this.params.tabIndex = e.currentIndex;
			}
		},
		async getData (mescroll) {
			try {
				this.isLoading = true
				const fData = {
					pageSize: mescroll.size,
					page: mescroll.num,
					stock_record_id: this.params.recordId,
					record_type: this.params.recordType
				}
				if (fData.page === 1) {
					this.tableData = []
				}
				console.log('fData', fData)
				const { success, data, message } = await getShopListByRecord(fData)
				if (!success) {
					this.$modal.showToast(message);
				}
				const lists = data || []
				mescroll.endSuccess(lists.length);
				this.tableData = [].concat(this.tableData, lists);
				this.closeLoading()
			} catch (error) {
				mescroll.endErr();
				this.closeLoading()
				if (this.tableData.length === 0 && mescroll.num === 1) {
					mescroll.showEmpty();
				}
			}
		},
		closeLoading () {
			if (this.$refs.loading) {
				this.$refs.loading.hide()
			};
			this.isLoading = false
		},
	}
};
</script>

<style lang="scss">
.list_empty {
	position: relative;
	top: -50%;
	padding-top: 154px;
}

.view_list {
	.view_top {
		height: 100rpx;
	}

	.view_fixed {
		position: fixed;
		left: 0;
		top: 0rpx;
		z-index: 10;
		width: 100%;
		height: auto;
		background: #fff;
		box-shadow: 0px 2rpx 10rpx rgba(193, 193, 193, 0.2);

		.view_heard {
			width: 100%;

			// height: 132rpx;
			/deep/ .uni-navbar {
				.uni-navbar--shadow {
					box-shadow: unset;
				}
			}
		}

		.view_search {
			width: 100%;
			height: 110rpx;
			border-top: 1rpx solid #dcdcdc;
			border-bottom: 1rpx solid #dcdcdc;
			display: flex;
			align-items: center;
			justify-content: space-between;

			/deep/ .uni-searchbar {
				flex: 1;
			}
		}

		.view_tabs {
			width: 100%;
			height: 110rpx;
			padding: 15rpx 20rpx 15rpx;

			/deep/ .segmented-control--button {
				.segmented-control__item {
					border-radius: 50rpx;
					border-color: transparent !important;

					.segmented-control__text {
						color: #333 !important;
					}

					&.segmented-control__item--button--active {
						border: 2rpx solid rgba(41, 121, 255, 1) !important;
						background-color: rgba(41, 121, 255, 0.3) !important;

						.segmented-control__text {
							color: rgba(41, 121, 255, 1) !important;
						}
					}
				}
			}
		}
	}

	/deep/ .list_content {
		padding: 30rpx;
		padding-top: calc(30rpx + 0rpx);
		background: transparent;

		.list_item {
			border-radius: 30rpx;
			background: #fff;
			overflow: hidden;

			&+.list_item {
				margin-top: 20rpx;
			}
		}

	}
}
</style>
